<template>
  <div>
    <h1>动态样式</h1>
    <ul>
      <li class="red" :class="{ size: isSize, border: num > 1 }">动态class</li>
      <li
        style="color: blue; font-size: 28px"
        :style="{ border: '2px solid pink', fontSize: font }"
      >
        动态style
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  /**
   * 动态样式：
   * 1.动态class(推荐) <div :class="{类名1: 变量/表达式, 类名2: 变量/表达式}"></div>
   * 2.动态style <div :style{样式名: 变量/样式值}></div>
   */
  data() {
    return {
      isSize: true,
      num: 5,
      font: "80px",
    };
  },
};
</script>

<style>
.red {
  color: red;
}
.size {
  font-size: 28px;
}

.border {
  border: 2px solid yellowgreen;
}
</style>